<template>
  <div style="width: 100%; height: 100%">
    <vxe-table
      border
      resizable
      :height="height"
      :scroll-y="{ enabled: false }"
      :span-method="mergeRowMethod"
      :data="tableData.data"
    >
      <vxe-table-column
        :highlight-hover-row="true"
        v-for="(config, index) in tableData.columns"
        :key="index + config.title"
        :type="config.type"
        :field="config.field"
        :title="config.title"
        :align="config.align"
        :fixed="config.fixed"
        :width="config.width"
        min-width="100"
        :filters="config.filters"
      >
      </vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Object | Array,
      default: () => ({
        columns: [],
        data: [],
      }),
    },
    height: {
      type: Number | String,
      default: () => "",
    },
    merge: {
      type: Object | Array,
      default: () => [],
    },
    reverse: {
      type: Boolean,
      default: () => false,
    },
    border: {
      type: Boolean,
      default: () => true,
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    // 通用行合并函数（将相同多列数据合并为一行）
    mergeRowMethod({ row, _rowIndex, column, visibleData,columnIndex }) {
      const fields = this.merge;
      const cellValue = row[column.property];
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1];
        let nextRow = visibleData[_rowIndex + 1];
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },
  },
};
</script>

<style>
</style>